// 人员签到 底部导航

<template id="v-navber-construction">
    <f7-viewbar slot="fixed"
                class="f7-link">
        <f7-link v-for="(item, i) in filterLinks"
                 :key="i"
                 :icon-f7="item.icon"
                 :text="item.text"
                 href="#"
                 @click="link(item.href)"
                 :tab-link-active="item.tabLinkActive"></f7-link>
    </f7-viewbar>
</template>
<script>
import Config from "../../config";
export default {
    props: {
        engineeId: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            links: [
                {
                    text: "签到",
                    icon: "checkmark_rectangle",
                    class: "home",
                    // href: "/business/index/",
                    href: "/business/construction/enginee/signin/signin",
                    tabLinkActive: true,
                },
                {
                    text: "签到记录",
                    icon: "line_horizontal_3",
                    class: "home",
                    // href: "/business/index/",
                    href: "/business/construction/enginee/signin/record",
                    tabLinkActive: false,
                }
            ]
        }
    },
    computed: {
        filterLinks () {
            let role = ['BUILD_MANAGER', 'IOS_ROLE']
            role = role.map(item => {
                item = item.toLowerCase()
                return item
            })
            // 过滤出底部路由
            let links
            if (this.$framework.account.hasRole(role)) {
                links = this.links.filter(item => {
                    return item.text != '签到'
                })
            } else {
                links = this.links
            }
            return links
        }
    },
    methods: {
        fillUrl (url) {
            let r = url;
            if (!this.$util.startsWith(r, "/")) {
                r = "/" + r;
            }
            if (!this.$util.endsWith(r, "/")) {
                r = r + "/";
            }
            return r;
        },
        link (url) {
            this.$f7.views.current.router.navigate(`${url}?engineeId=${this.engineeId}`, { animate: false, reloadCurrent: true });
        },
    },
    mounted () {
        var url = this.$f7route.path;
        if (url == "/") {
            url = Config.pages.home;
        }
        this.$util.each(this.links, (c) => {
            c.tabLinkActive = this.fillUrl(c.href) == this.fillUrl(url);
        });
    },
};
</script>
<style lang="less" scoped>
.f7-link::after {
    display: none;
}
.f7-link::before {
    display: none;
}
.f7-link {
    background-color: #ffffff;
    // height: calc(106px * var(--ratio));
    box-shadow: 2px -4px 20px 3px #0000000a;
}
/deep/ .link i + span {
    margin-left: 0px;
    margin-top: 4px;
}
</style>
